import { Fragment, Children } from 'react'
import { View } from "@tarojs/components"
import clsx from "clsx"
import { pxTransform, ShareAppMessageReturn, useShareAppMessage } from "@tarojs/taro"
import GpAuthPannel from '@/components/GpAuthPannel'
import styles from "./index.module.scss"
import { SafeArea } from '@taroify/core'

interface Props extends React.PropsWithChildren{
  className?: string
  /** @default 0 */
  pageGap?: number | string
  style?: React.CSSProperties
  shareConfig?: ShareAppMessageReturn
  /** @default true */
  safeArea?: boolean
}
const GpContainer: React.FC<Props> = ({ children, className, pageGap = 0, style, shareConfig = {}, safeArea = true }) => {
  useShareAppMessage(() => {
    return shareConfig
  })
  return (
    <Fragment>
      <View
        className={clsx(styles.container, className)}
        style={{
          paddingBottom: pageGap && typeof pageGap === 'number' ? pxTransform(pageGap) : pageGap,
          ...style
        }}
      >
        {Children.map(children, child => {
          return child
        })}
        {safeArea && <SafeArea position='bottom' />}
      </View>
      <GpAuthPannel />
    </Fragment>
  )
}

export default GpContainer
